<!DOCTYPE html>
<html lang="zh-cn"><head>
    <meta charset="utf-8">
    <title>游戏特权 - QQ会员</title>
    <style type="text/css">
        .ui-top.show{
            display: block;
        }
        .mod-hot-mobile-game .game-icon-list li {position: relative;}
        .mod-hot-mobile-game .game-icon-list li .qrcode {display: none;position: absolute;top: 0;left: 0;width: 110px;height: 110px;z-index: 99999;text-align: center;}
        .mod-hot-mobile-game .game-icon-list li:hover .qrcode{display: block;}
        .mod-hot-mobile-game .game-icon-list li .qrcode:hover{display: block;}
    </style>
    <link rel="stylesheet" href="css/base.css" media="screen">
    <link rel="stylesheet" href="css/games.css" media="screen">
    <script src="js/jquery-1.12.4.js"></script>
<body>
<!-- 页面主体 start-->
<div class="wrapper">
    <!-- 通用导航 -->
    <header class="ui-navbar">
        <div class="ui-navbar-container">
            <!-- logo -->
            <a href="../QQVIP_index/QQVIP_index.html" class="ui-navbar-logo index" title="QQ会员首页"><img src="images/logo.png" alt="QQ会员"></a>
            <a href="../QQVIP_index/QQVIP_index.html" class="ui-navbar-logo other" title="QQ会员首页"><img src="images/logo_b.png" alt="QQ会员"></a>

            <!-- 导航列表 -->
            <nav class="ui-navbar-list">
                <h2 class="hide-clip">网站导航</h2>
                <ul>
                    <li data-idx="1" class="">
                        <a  href="javascript:void(0)">功能特权</a>
                        <ul class="menu-1">
                            <li class=""><a  href="javascript:;">全部特权</a></li>
                            <li class=""><a  href="javascript:;">分等级特权</a></li>
                        </ul>
                    </li>
                    <li data-idx="2" class="current">
                        <a  href="games.html">游戏特权</a>
                    </li>
                    <li data-idx="3" class="">
                        <a  href="../life&activity/life.html">生活特权</a>
                    </li>
                    <li data-idx="4" class="">
                        <a  href="../decoration/decoration.html">装扮特权</a>
                    </li>
                    <li data-idx="5" class="">
                        <a  href="../life&activity/activity.html">会员活动</a>
                        <ul class="menu-5">
                            <li class=""><a  href="javascript:;">全部活动</a></li>
                            <li class=""><a  href="javascript:;">徽章馆</a></li>
                            <li><a  href="javascript:;">靓号站</a></li>
                        </ul>
                    </li>
                    <li data-idx="6" class="">
                        <a  href="javascript:;">成长体系</a>
                        <ul class="menu-6">
                            <li class=""><a  href="javascript:;">成长任务</a></li>
                            <li class=""><a  href="javascript:;">积分乐园</a></li>
                            <li class=""><a  href="javascript:;">排名中心</a></li>
                        </ul>
                    </li>
                    <li data-idx="7" class="">
                        <a  href="javascript:;">年费专区</a>
                        <ul class="menu-7">
                            <li class=""><a  href="javascript:;">年费介绍</a></li>
                            <li class=""><a  href="javascript:;">专属礼包</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <!-- 登录状态 -->
            <div class="ui-navbar-status" id="menu-userinfo-panel">
                <div class="ui-navbar-status-userinfo " id="menu-user-panel">
                    <a  href="javascript:;">
                  <span class="ui-navbar-status-avatar">
                      <!-- <img src="http://placeholder.qiniudn.com/30x30" width="30" height="30" alt="头像"> -->
                  </span>\
                        <span class="ui-navbar-status-username" style="width:93px;">&nbsp;</span>
                    </a>
                    <!-- 未登录-->
                    <div class="ui-navbar-status-userinfo" id="login_btn"><span class="ui-navbar-status-login" id="menu-login-btn">登录</span></div>
                </div>

            </div>
            <!-- /登录状态 -->
            <div class="ui-navbar-justifyfix"></div>
        </div>

        <!-- 个人中心子页面-->
        <div class="ui-navbar-subnav" style="display: none;">
            <div class="ui-navbar-subnav-container">
            </div>
        </div>
    </header>
    <!-- /通用导航 -->

    <!--内容 start-->
    <div class="vip-game-wrapper">
        <div class="vip-game-content">
            <section class="ui-slider" id="ui_slider_wrapper" style="background-color:#fbfbfb; text-align: center;height:500px;"><div id="ui_slider" style="height:500px; margin: 0 auto;">
              <ul class="ui-slider-content">
                 <li style="background-color: rgb(253, 239, 176); "><a  href="javascript:;" title="CF考试"><img src="images/201606231448_1180500.jpg" alt="CF考试"></a></li>
                <li style="background-color: rgb(238, 240, 239);"><a  href="javascript:;" title="流星搜剑录"><img src="images/201606151625_tequan.jpg" alt="流星搜剑录"></a></li>
                <li style="background-color: rgb(3, 1, 2); "><a  href="javascript:;" title="刀锋铁骑"><img src="images/201606281043_1180x500.jpg" alt="刀锋铁骑"></a></li>
                <li style="background-color: rgb(9, 20, 4);"><a  href="javascript:;" title="逆战"><img src="images/201606231738_1400x500.jpg" alt="逆战"></a></li>
                <li style="background-color: rgb(32, 14, 14);"><a  href="javascript:;" title="CF新版本"><img src="images/201606162038_1180500.jpg" alt="CF新版本"></a></li>
            </ul>
                <div style="z-index: 5;" class="ui-slider-indicators" id="ui_slider_pagination"><li class="">1</li><li class="">2</li><li class="">3</li><li class="">4</li><li class="current">5</li></div></div></section>
            <section class="mod-hot-game">
                <div class="hotgame-content">
                    <div class="hotgame-title">
                        <h3>热门游戏专区</h3>
                    </div>
                    <div class="hotgame-tab">
                        <div class="hotgame-list">
                            <ul class="hotgame-list-title">
                                <li class="current" data-index="1"><a href="javascript:;">角色扮演</a></li>
                                <li class="" data-index="2"><a href="javascript:;">动作游戏</a></li>
                                <li class="" data-index="3"><a href="javascript:;">竞技游戏</a></li>
                                <li class="" data-index="4"><a href="javascript:;">休闲游戏</a></li>
                                <li class="" data-index="5"><a href="javascript:;">手机游戏</a></li>
                                <li class="" data-index="6"><a href="javascript:;">网页游戏</a></li>
                            </ul>

                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="1" style="display: block;">
                                <li class="highlight">
                                    <a  href="javascript:;" data-id="Xysj">轩辕世界<span class="hotgame-label hot"></span></a></li>
                            </ul>
                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="2" style="display: none;"><li class="highlight"><a  href="javascript:;" data-id="Bns">剑灵<span class="hotgame-label hot"></span></a></li>
                        </ul>
                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="3" style="display:none;"><li class="highlight"><a  href="javascript:;" data-id="Cf">穿越火线<span class="hotgame-label hot"></span></a></li>
                            <li class="highlight"><a  href="javascript:;" data-id="Smite">神之浩劫<span class="hotgame-label hot"></span></a></li>
                        </ul>
                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="4" style="display:none;"><li class="highlight"><a  href="javascript:;" data-id="Fifa">FIFA Online 3<span class="hotgame-label hot"></span></a></li>
                            <li class="highlight"><a  href="javascript:;" data-id="Nba2k">NBA2K Online<span class="hotgame-label hot"></span></a></li>
                        </ul>
                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="5" style="display:none;"><li class="highlight"><a  href="javascript:;" data-id="Qqgame">QQ手游<span class="hotgame-label hot"></span></a></li>
                            <li class=""><a  href="javascript:;" data-id="Mir">热血传奇<span class=""></span></a></li>
                        </ul>
                            <ul class="hotgame-list-content txt-nowrap" data-gamegroup="6" style="display:none;"><li class=""><a  href="javascript:;" data-id="Hyrz">火影忍者<span class=""></span></a></li>
                            <li class=""><a  href="javascript:;" data-id="Lx">龙啸天下<span class="hotgame-label new"></span></a></li>
                            <li class=""><a  href="javascript:;" data-id="Bf">暴风王座<span class="hotgame-label new"></span></a></li>
                            <li class="highlight"><a  href="javascript:;" data-id="Xiaoyao">逍遥<span class="hotgame-label hot"></span></a></li>
                        </ul>
                        </div>
                    </div>
                </div>
            </section>
            <section class="mod-free-gift">
                <div class="list-title">
                    <h2>礼包免费领 <span style="float:right;font-size: 0.7em;cursor: pointer;" id="my-user-panel-gift">我的礼包</span></h2>
                </div>
                <div class="free-gift-content">
                    <ul class="game-list free-gift-list"><li><a  href="javascript:;" title="免费抽取激活码"><img src="images/201606151632_220280.jpg"><p class="subject txt-nowrap">免费抽取激活码</p></a></li>
                        <li><a  href="javascript:;" title="海量礼包一起来战"><img src="images/201605281028_220x280.jpg"><p class="subject txt-nowrap">海量礼包一起来战</p></a></li>
                        <li><a  href="javascript:;" title="会员抢雷蛇键鼠！"><img src="images/201606281046_220x280.jpg"><p class="subject txt-nowrap">会员抢雷蛇键鼠！</p></a></li>
                        <li><a  href="javascript:;" title="预约必得炎龙三件套"><img src="images/1466080505_220x280.jpg"><p class="subject txt-nowrap">预约必得炎龙三件套</p></a></li>
                        <li><a  href="javascript:;" title="永久武器全民竞拍"><img src="images/201605301918_220x280.jpg"><p class="subject txt-nowrap">永久武器全民竞拍</p></a></li>
                        <li><a  href="javascript:;" title="DNF送豪礼"><img src="images/201606171123_220280.jpg"><p class="subject txt-nowrap">DNF送豪礼</p></a></li>
                        <li><a  href="javascript:;" title="30元超值套装"><img src="images/201606171841_220280.jpg"><p class="subject txt-nowrap">30元超值套装</p></a></li>
                        <li><a  href="javascript:;" title="新老玩家赢好礼"><img src="images/201606171708_220x280.jpg"><p class="subject txt-nowrap">新老玩家赢好礼</p></a></li>
                        <li class="last"><a  href="javascript:;" title="幸运奖池任你选！"><img src="images/201606011559_220X280.jpg"><p class="subject txt-nowrap">幸运奖池任你选！</p></a></li>
                        <li class="last"><a  href="javascript:;" title="轩辕世界送好礼！"><img src="images/201606172125_220280.jpg"><p class="subject txt-nowrap">轩辕世界送好礼！</p></a></li>
                    </ul>
                </div>
            </section>
            <section class="mod-new-game">
                <section class="mod-new-game-play">
                    <div class="new-game-content">
                        <div class="list-title">
                            <h2>新游抢先玩</h2>
                        </div>
                        <ul class="game-list new-game-list"><li><a  href="javascript:;" title="会员抢雷蛇键鼠"><img src="images/201606281048_220x280.jpg"><p class="subject txt-nowrap">会员抢雷蛇键鼠</p></a></li>
                            <li><a  href="javascript:;" title="轩辕世界豪礼放送"><img src="images/201606171841_220280.jpg"><p class="subject txt-nowrap">轩辕世界豪礼放送</p></a></li>
                            <li><a  href="javascript:;" title="免费抽取激活码"><img src="images/201606151640_220280.jpg"><p class="subject txt-nowrap">免费抽取激活码</p></a></li>
                            <li class="last"><a  href="javascript:;" title="战争雷霆不限号"><img src="images/201605201654_220x280.jpg"><p class="subject txt-nowrap">战争雷霆不限号</p></a></li>
                        </ul>
                    </div>
                </section>
                <section class="mod-new-hot-game">
                    <div class="list-title new-hot-game-title">
                        <h2>新游热度榜 <span class="icon-wrap"><span class="arrow-left"> </span><span class="arrow-right"></span></span></h2>
                    </div>
                    <ul class="new-hot-game-list"><li><a  href="javascript:;"><img src="images/201606061703_xinyouredu.jpg"><div class="game-item"><p class="game-name txt-nowrap">抢限量豪礼</p><p class="game-info txt-nowrap">神之浩劫</p></div></a></li>
                        <li><a  href="javascript:;"><img src="images/201510211753_60x60.png"><div class="game-item"><p class="game-name txt-nowrap">王牌对决</p><p class="game-info txt-nowrap">注册抢豪礼</p></div></a></li>
                        <li><a  href="javascript:;"><img src="images/201606151638_6060.jpg"><div class="game-item"><p class="game-name txt-nowrap">免费抽取激活码</p><p class="game-info txt-nowrap">免费抽取激活码</p></div></a></li>
                        <li><a  href="javascript:;"><img src="images/201604261532_60x60.jpg"><div class="game-item"><p class="game-name txt-nowrap">兽人必须死</p><p class="game-info txt-nowrap">限量激活码</p></div></a></li>
                    </ul>
                </section>
            </section>
            <section class="mod-game-recommend">
                <section class="mod-hot-mobile-game">
                    <div class="hot-mobile-game-content">
                        <div class="list-title">
                            <h2>热门手游</h2>
                        </div>
                        <ul class="game-icon-list"><li><a href="javascript:;"><img src="images/201604211513_110x110.jpg"><p class="name txt-nowrap">王者荣耀</p></a><div title="王者荣耀" class="qrcode"><canvas style="display: none;" height="110" width="110"></canvas></div></li>
                            <li><a href="javascript:;"><img src="images/201507101656_110x110.jpg"><p class="name txt-nowrap">天天酷跑</p></a><div title="天天酷跑" class="qrcode"><canvas style="display: none;" height="110" width="110"></canvas></div></li>
                            <li class="last"><a href="javascript:;" ><img src="images/201604211603_110x110_hyrz.jpg"><p class="name txt-nowrap">火影忍者</p></a><div title="火影忍者" class="qrcode"><canvas style="display: none;" height="110" width="110"></canvas></div></li>
                        </ul>
                    </div>
                </section>
                <section class="mod-hot-pc-game">
                    <div class="hot-pc-game-content">
                        <div class="list-title">
                            <h2>热门页游</h2>
                        </div>
                        <ul class="game-icon-list"><li><a  href="javascript:;"><img src="images/201601281753_128x110.jpg"><p class="name txt-nowrap">怪物猎人开拓记</p></a></li>
                            <li><a  href="javascript:;"><img src="images/201604181544_sksyu.jpg"><p class="name txt-nowrap">时空神域</p></a></li>
                            <li><a  href="javascript:;"><img src="images/201507101649_110x110.jpg"><p class="name txt-nowrap">决战西游</p></a></li>
                            <li class="last"><a  href="javascript:;"><img src="images/201509301311_110x110.jpg"><p class="name txt-nowrap">逍遥</p></a></li>
                        </ul>
                    </div>
                </section>
            </section>
        </div>
    </div>
    <span class="ui-top"></span>
    <!--内容 end-->
    <div class="ui-footer">
        <nav>
            <ul>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-qq"></span>
                        <span>官方手Q账号</span>
                        <div class="qrcode">
                            <img src="images/qq_qrcode_preview.jpg" alt="官方手Q账号">
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-wechat"></span>
                        <span>官方微信账号</span>
                        <div class="qrcode">
                            <img src="images/1392709767_big.png" alt="官方微信账号">
                        </div>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-exchange"></span>
                        <span>兑换中心</span>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-bbs"></span>
                        <span>兴趣部落</span>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-qzone"></span>
                        <span>官方空间</span>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-weibo"></span>
                        <span>官方微博</span>
                    </a>
                </li>
                <li>
                    <a  href="javascript:;">
                        <span class="ui-footer-icon icon-service"></span>
                        <span>客服中心</span>
                    </a>
                </li>
            </ul>
        </nav>
        <p class="ui-footer-copyright">Copyright © 1998 - 2016 Tencent .  All Rights Reserved</p>
        <p class="ui-footer-copyright">腾讯公司 版权所有</p>
    </div>
</div>


<!-- 页面主体 end-->
<script>
    //轮播图
    //鼠标移入  清除定时器
    $(".ui-slider-content").mouseenter(function() {
        clearInterval(timerId);
    });
    //鼠标移出  开启定时器
    $(".ui-slider-content").mouseleave(function() {
        timerId = setInterval(function(){
            timerShow();
        },5000)
    });

    var index = 0;
    var length = $(".ui-slider-content").children().length;

    var timerId = setInterval(function(){
        timerShow();
    },5000)

    function timerShow() {
        index++;
        index < length;
        $(".ui-slider-content").children().eq(index).animate({"opacity":1}, 1000).siblings().animate({"opacity":0}, 1000);
        if(index == length) {
            index = 0;

        }
    }

    //克隆第一张图片
    var firstLi = $(".ui-slider-content").children().eq(0);
    var cloneLi = firstLi.clone(true);
    $(".ui-slider-content").append(cloneLi);


    //        让兄弟里面的div展示出来，让其他div隐藏
    $(".hotgame-list-title li").click(function () {
        var i =  $(this).index();
        $(this).addClass("current").siblings().removeClass("current");
        $(this).parent().siblings().eq(i).show().siblings(".hotgame-list-content").hide();
    });

</script>
</body>
</html>